﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
                <b>Custom Google Map</b> template used to show locations on your website in a different way than regular Google maps. It can be easily customised to perfectly fit your website style!
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>

        <div class="col-sm-8">
            <img src="../lists/Templates/beta/customgooglemap/content/imgs/featured.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported browsers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v9+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-4'>Type</th>
                        <th class='col-sm-4'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Image tooltip (alt)</td>
                    </tr>
                    <tr>
                        <td>fldImage</td>
                        <td>Hyperlink or Picture (Picture)</td>
                        <td>Slide Image</td>
                    </tr>
                    <tr>
                        <td>fldLink</td>
                        <td>Hyperlink or Picture (Hyperlink)</td>
                        <td>Slide on click link</td>
                    </tr>
                    <tr>
                        <td>fldDescription</td>
                        <td>Multiple lines (Enhanced rich text)</td>
                        <td>Slide description area, html content is allowed</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the <b>Apply</b> tab and change field mappings from the <b>Fields Mapping section</b>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Default</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>componentDescription</td>
                        <td>Our Locations</td>
                        <td>Shows a caption that will appear at the bottom of the map </td>
                    </tr>
                    <tr>
                        <td>width</td>
                        <td>100%</td>
                        <td>map width size </td>
                    </tr>
                    <tr>
                        <td>centerLatitude</td>
                        <td>25.19709</td>
                        <td>center Latitude for the map</td>
                    </tr>
                    <tr>
                        <td>centerLongitude</td>
                        <td>55.274797</td>
                        <td>center Longitude for the map</td>
                    </tr>
                    <tr>
                        <td>zoom</td>
                        <td>12</td>
                        <td>the initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Getting Latitude &amp; Longitude</h3>
            <p>To get the Latitude and Longitude for a specific location from Google Maps, you can go to Google map's site and search for the name of the target location, for example here is how to get the exact location for Amman:</p>
            <br />
        </div>
        <div class="col-sm-10">
            <img src="../Lists/Templates/beta/googlemap/content/imgs/location.png" class=" img-thumbnail" />
            <br />
            <br />
            As can be seen, you can get the Latitude and Longitude from the url, the first value <b>after the @ sign </b>is the Latitude, and the second one <b>after the comma</b> is the Longitude.
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following libraries were used to help creating this template:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">

                <tbody>
                    <tr>
                        <td><a href="http://codyhouse.co/gem/custom-google-map/" target="_blank">Custom Google Map</a></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.google.com/maps/" target="_blank">Google Maps</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>